<template>
    <div>
        <div class="subTitle">最新文章</div>
        <ul class="datas" v-loading="loading">
            <li v-for="item in blogs" class="item" :key="item.id">
            <i class="iconfont iconfangkuai"></i>
            <div class="time">{{$filters.dateFormat(item.created)}}</div>
            <div class="page-title" @click="detail(item.id)">{{item.title}}</div>
            </li>
        </ul>
    </div>
</template>


<script>
import {blogs} from 'network/app'
export default {
    data(){
        return {
            blogs: [],
            currentPage: 1,
            total: 0,
            pageSize: 12,
            loading: false
        }
        
    },
    methods: {
        page(currentPage, pageSize) {
            this.loading = true
            const _this = this
            blogs(currentPage, pageSize)
                .then(res => {
                    _this.blogs = res.data.data.records
                    _this.currentPage = res.data.data.current
                    _this.total = res.data.data.total
                    _this.pageSize = res.data.data.size

                })
                .finally(()=>{
                    this.loading = false
                })
        },
        detail(id){
            this.$router.push({
            name: 'BlogDetail',
            params: {
                blogId: id
            }
            })
        },
    },
    created(){
        this.page(this.currentPage,this.pageSize)
    }
}
</script>

<style lang="scss" scoped>
    .subTitle{
        font-size: .37037rem;
        font-weight: bold;
        color: 000;
        border-bottom: 1px solid #d3d3d3;
        padding-bottom: .37037rem;
        margin-bottom: .555556rem;
    }
    .datas{
        margin-left: .5rem;
        font-size: .296296rem;
        .item{
        
        i{
            margin-right: .185185rem;
        }
        padding: .277778rem 0;
        display: flex;
        align-items: center;
        vertical-align: middle;
        .page-title{
            height: .37037rem;
            line-height: .37037rem;
            color: #4d5156;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .page-title:hover{
            text-decoration: underline;
        }
        }
    }
</style>